<template>
  <div class="container">
    <h2>App组件</h2>
    <p v-upper-text="msg"></p>
    <p v-lower-text="msg"></p>
    
    <p v-lower-text2="msg"></p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      msg: 'I Will Back'
    }
  },
  mounted () {
    setTimeout(() => {
      this.msg += '--'
    }, 1000);
  },
  directives: {
    'lower-text2': (el, binding) => {
      console.log('lower-text2', binding)
      // 向标签中插入全大写的文本
      el.innerText = binding.value.toLowerCase()
    }
  }
};
</script>
    
